<template>
  <div>
    <historyLook ref="historyLook" :visible.sync="visible" @closeDetailFun="closeDetailFun" :historyTables="historyTables" :isMobile="isMobile"/>

  <div class="" v-if="!isMobile">
    <el-card v-if="contentView">
      <el-row>
        <el-col :span="4" style="margin-right: 10px">
          <el-input
            placeholder="物料编号"
            size="medium"
            v-model="queryInfo.materialNumber"
            clearable
          >
          </el-input>
        </el-col>
        <el-col :span="4" style="margin-right: 10px">
          <el-input
            size="medium"
            placeholder="物料描述"
            v-model="queryInfo.materialName"
            clearable
          >
          </el-input>
        </el-col>

        <el-col :span="4" style="margin-right: 10px">
          <el-input
            size="medium"
            placeholder="领用单位"
            v-model="queryInfo.receiveUnit"
            clearable
          >
          </el-input>
        </el-col>

        <el-col :span="4" style="margin-right: 10px">
          <el-input
            size="medium"
            placeholder="项目名称"
            v-model="queryInfo.projectName"
            clearable
          >
          </el-input>
        </el-col>
        <el-col :span="4" style="margin-right: 10px">
          <el-input
            size="medium"
            placeholder="单位工程名称"
            v-model="queryInfo.unitEngName"
            clearable
          >
          </el-input>
        </el-col>
        <el-col :span="4" style="margin-right: 10px;margin-top:10px ">
          <el-select
            style="margin-right: 20px"
            clearable
            v-model="queryInfo.engType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in engTypes"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" icon="el-icon-search" @click="seacher" style=" margin-top:10px "
            >搜索</el-button
          >
        </el-col>

        <el-col :span="2" style="margin-top: 10px">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-download"
            @click="downloadTemplate"
            >下载导入模板</el-button
          >
        </el-col>

        <el-col :span="2" style="margin-top: 10px">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-download"
            @click="addImoprt"
            >新增导入</el-button
          >
        </el-col>

        <el-col :span="2" style="margin-top: 10px">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-download"
            @click="lookeDetails"
            >查看数据</el-button
          >
        </el-col>
        <el-col :span="2" style="margin-top: 10px">
          <el-button
            type="primary"
            icon="el-icon-upload2"
            :loading="isExport"
            @click="exportData"
            >导出数据</el-button
          >
        </el-col>
        <el-col :span="12" style="text-align: right">
          <!--          <el-button  v-if="authFilter('add_out_stock')" type="primary" icon="el-icon-plus" @click="operationView(0)">添加</el-button>-->
        </el-col>
      </el-row>
      <!--表格-->
      <el-table
        :row-style="{ height: '10px' }"
        :cell-style="{ padding: '0px' }"
        :data="tableData"
        border
        v-loading="loading"
      >
        <!-- 展开列 -->
        <!--        <el-table-column type="expand">-->
        <!--          <template slot-scope="props">-->
        <!--            <div>-->
        <!--              <el-table-->
        <!--                  :data="props.row.children"-->
        <!--                  style="width: 100%"-->
        <!--                  :header-cell-style="{ background: '#FAFAFA' }"-->
        <!--                >-->
        <!--                  <el-table-column label="物料名称" prop="materailName"></el-table-column>-->
        <!--                  <el-table-column label="物料编号" prop="materailNumber"></el-table-column>-->
        <!--                  <el-table-column label="实际数量" prop="actualQut"></el-table-column>-->
        <!--                  <el-table-column label="计划数量" prop="planQut"></el-table-column>-->
        <!--                  <el-table-column label="工厂非限制库存" prop="notLimitStock"></el-table-column>-->
        <!--                </el-table>-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->

        <el-table-column
          label="物料描述"
          prop="materailName"
          width="100"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          label="物料编号"
          prop="materailNumber"
          width="100"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <!--<el-table-column label="计划领用数量" prop="planQut" width="150"></el-table-column>-->
        <el-table-column
          label="实际领用数量"
          prop="actQut"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          label="计量单位"
          prop="unit"
          width="80"
          align="center"
        ></el-table-column>

        <!--        <el-table-column type="index" label="序号" v-if="false" align="center" width="50">-->
        <!--        </el-table-column>-->
        <!--计划领用数量用于提交人一旦提起这个申请,库存里面锁定这个数量-->
        <el-table-column
          prop="receiveUnit"
          label="领用单位"
          :show-overflow-tooltip="true"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="receiveUserName"
          label="领用人"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="creatorName"
          label="单据创建人"
            :show-overflow-tooltip="true"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="projectName"
          label="项目名称"
          :show-overflow-tooltip="true"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="unitEngName"
          label="单位工程名称"
          align="center"
          :show-overflow-tooltip="true"
          width="100"
        >
        </el-table-column>
        <el-table-column label="工程类型" align="center" width="100"   :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.engType">{{ scope.row.engType.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="receiveBatch"
          label="领用批次"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="useAddress"
          label="使用地点"
          align="center"
          :show-overflow-tooltip="true"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="receiveTime"
          label="领用时间"
            :show-overflow-tooltip="true"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="repositoryName"
          label="领用仓库"
            :show-overflow-tooltip="true"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="singlePrice"
          label="单价"
          width="150"
          align="center"
            :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column prop="amount" label="金额" width="150" align="center"   :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="审核状态" width="100" align="center"   :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span
              @click="history(scope.row)"
              v-if="scope.row.status.code == 3"
              style="color: #1c9913"
              >{{ scope.row.status.name }}</span
            >
            <span
              @click="history(scope.row)"
              v-else-if="scope.row.status.code == 2"
              style="color: #ffb547"
              >{{ scope.row.status.name }}</span
            >
            <span v-else style="color: #ff4141">{{
              scope.row.status.name
            }}</span>
          </template>
        </el-table-column>
        <!--        <el-table-column  label="操作" align="center" >-->
        <!--        	<template  slot-scope="scope">-->
        <!--            <div   >-->
        <!--              <el-button type="text" icon="el-icon-tickets" @click="operationView(1,scope.row)">编辑</el-button>-->
        <!--              <el-button v-if="scope.row.status.code == 2" type="text" icon="el-icon-edit" @click="withdraw(scope.row)">撤回</el-button>-->
        <!--        		</div>-->
        <!--        	</template>-->
        <!--        </el-table-column>-->
      </el-table>
      <div style="float: right">合计金额:{{ sum }}</div>
      <el-pagination
        style="text-align: center"
        :disabled="loading"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNo"
        :page-sizes="[25, 50]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <submitForm
      v-else
      :subData="subData"
      @closeView="closeView"
      @refresh="refreshTable"
    ></submitForm>


    <el-dialog :visible.sync="importVisible" :isMobile="isMobile" append-to-body width="30%">
      <p style="text-align: center; size: mini" class="map">新增导入</p>
      <el-form :model="importForm">
        <el-form-item label="导入的文件:" prop="fileName">
          <el-upload
            style="margin: 0 10px"
            :action="importUrl + 'import/uploadExcel'"
            :on-success="uploadSuccessHandler"
            :on-error="uploadFailHandler"
            :before-upload="beforeUpload"
            :file-list="fileList"
            multiple
            name="excel"
            :show-file-list="true"
            :headers="headers"
          >
            <el-button type="primary" icon="el-icon-download"
              >点击上传</el-button
            >
            <div slot="tip" class="el-upload__tip">上传EXCEL文件</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="工程类型:" prop="fileName">
          <el-select
            style="margin-right: 20px"
            clearable
            v-model="importForm.engType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in engTypes"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button
          class="global-button"
          round
          type="primary"
          @click="importVisible = false"
          >关闭</el-button
        >
        <el-button
          class="global-button"
          round
          type="primary"
          @click="submitImport"
          >提交</el-button
        >
      </span>
    </el-dialog>
  </div>
<!-- 手机 -->
  <div class="mobile-box" v-else>
    <el-row v-if="!showForm" >
      <el-col class="mobile-seacher-box">
        <el-col :span="11" style="margin-right: 10px">
          <el-input
            placeholder="物料编号"
            size="medium"
            v-model="queryInfo.materialNumber"
            clearable
          >
          </el-input>
        </el-col>
        <el-col :span="11" style="margin-right: 10px">
          <el-input
            size="medium"
            placeholder="物料描述"
            v-model="queryInfo.materialName"
            clearable
          >
          </el-input>
        </el-col>
      </el-col>

    <el-col class="mobile-seacher-box">
      <el-col :span="11" style="margin-right: 10px">
        <el-input
          size="medium"
          placeholder="领用单位"
          v-model="queryInfo.receiveUnit"
          clearable
        >
        </el-input>
      </el-col>

      <el-col :span="11" style="margin-right: 10px">
        <el-input
          size="medium"
          placeholder="项目名称"
          v-model="queryInfo.projectName"
          clearable
        >
        </el-input>
      </el-col>
    </el-col>
    <el-col class="mobile-seacher-box">
      <el-col :span="11" style="margin-right: 10px">
        <el-input
          size="medium"
          placeholder="单位工程名称"
          v-model="queryInfo.unitEngName"
          clearable
        >
        </el-input>
      </el-col>
      <el-col :span="11" >
        <el-select

          clearable
          v-model="queryInfo.engType"
          placeholder="请选择工程类型"
        >
          <el-option
            v-for="item in engTypes"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-col>
    </el-row>
    <div class="btn-data">
      <el-button v-if="!showForm" type="primary" icon="el-icon-search" @click="seacher" style=" margin-top:10px ">搜索</el-button>
      <el-button type="primary" @click="addFormData">发起提交</el-button>
      <el-button type="primary" @click="lookeDetails">查看数据</el-button>
      <el-button type="primary" @click="scanQr"  v-if="showForm">扫码</el-button>
    </div>
    <div v-if="!showForm">
      <ul v-if="tableData.length" v-loading="loading">
        <li class="list-item" v-for="item in tableData" :key="item.id">
          <el-card>
            <el-col :span="24">
              <div>物料描述：{{ item.materailName }}</div>
            </el-col>
            <el-col :span="24">
              <div>实际领用数量：{{ item.actQut }}</div>
            </el-col>
            <el-col :span="24">
              <div>领用人：{{ item.receiveUserName }}</div>
            </el-col>
            <el-col :span="24">
              <div>领用时间：{{ item.receiveTime | formatTime('Y-M-D') }}</div>
            </el-col>
            <el-col :span="24">
              <div>金额：{{ item.amount }}</div>
            </el-col>
            <el-col :span="24">
              <div  >审核状态：
                <span
                  @click="history(item)"
                  v-if="item.status.code == 3"
                  style="color: #1c9913"
                >{{ item.status.name }}</span
                >
                <span
                  @click="history(item)"
                  v-else-if="item.status.code == 2"
                  style="color: #ffb547"
                >{{ item.status.name }}</span
                >
                <span  v-else style="color: #ff4141">{{
              item.status.name
            }}</span>


              </div>
            </el-col>
            <el-col :span="24" class="btn-box">
              <el-button type="primary" size="mini" @click="showDetailFun(item)">详情</el-button>
            </el-col>
          </el-card>
        </li>
        <el-pagination
          v-if="total >= queryInfo.pageSize"
          style="text-align: center; width: 90%; overflow: auto"
          :disabled="loading"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNo"
          :page-sizes="[25, 50]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </ul>
      <div v-if="!tableData.length" class="no-data">
        <img :src="require('../../../assets/noData.jpg')" />
      </div>
    </div>
    <!--物料领用-->
    <div v-if="showForm" class="addForm" v-loading="subLoading">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
        <el-form-item label="领用仓库" prop="repositoryId">
          <el-select v-model="ruleForm.repositoryId" placeholder="请选择" clearable filterable @change="sessionStorage">
            <el-option v-for="item in warehouseList"
              :key="item.id"
              :label="item.repositoryName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物料编码" prop="materailDTO.materailBasicInfoId"  >
          <div @click="showMaterial = true">
            <el-input v-model="ruleForm.materialNumber"  disabled ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="物料描述" prop="materailDTO.materailBasicInfoId" >
          <div >
            <el-input v-model="ruleForm.materialName" disabled ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="工程类型" prop="engType">
          <el-select v-model="ruleForm.engType" placeholder="请选择" clearable filterable @change="sessionStorage">
            <el-option
              v-for="item in engTypes"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="领用数量" prop="materailDTO.actualQut">
          <el-input v-model="ruleForm.materailDTO.actualQut" type="number" clearable @blur="sessionStorage"></el-input>
        </el-form-item>
        <el-form-item label="计量单位" prop="receiveDepart">
          <el-input v-model="ruleForm.receiveDepart" disabled clearable></el-input>
        </el-form-item>
        <el-form-item label="单价" >
          <!--v-model="ruleForm.materailDTO.singlePrice"-->
          <el-input  clearable disabled></el-input>
        </el-form-item>
        <el-form-item label="非限制库存"  prop="materailDTO.notLimitStock">
          <el-input v-model="ruleForm.materailDTO.notLimitStock" clearable @blur="sessionStorage"></el-input>
        </el-form-item>
        <el-form-item label="专业类别" prop="professCate">
           <el-select
              v-model="ruleForm.professCate" filterable  placeholder="请输入专业类别" @change="sessionStorage">
              <el-option v-for="item in professCateType"  :key="item.id"  :label="item.valueOne"  :value="item.valueOne">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="项目名称" prop="projectName">
          <el-select
             v-model="ruleForm.projectName" filterable  placeholder="请输入项目名称" @change="sessionStorage">
             <el-option v-for="item in projectNames"  :key="item.id"  :label="item.valueOne"  :value="item.valueOne">
             </el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="单位工程名称" prop="unitEngName">
          <el-input v-model="ruleForm.unitEngName" clearable @blur="sessionStorage"></el-input>
        </el-form-item>
        <el-form-item label="领用批次" prop="receiveBatch">
          <el-input v-model="ruleForm.receiveBatch" clearable @blur="sessionStorage"></el-input>
        </el-form-item>
        <el-form-item label="领用时间" prop="receiveTime">
          <el-date-picker
            v-model="ruleForm.receiveTime"
            type="date"
            placeholder="选择日期" @change="sessionStorage">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="领用部门" prop="receiveUnit">
          <el-select
             v-model="ruleForm.receiveUnit" filterable  placeholder="请输入领用部门" @change="sessionStorage">
             <el-option v-for="item in receivingUnits"  :key="item.id"  :label="item.valueOne"  :value="item.valueOne">
             </el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="领用人" prop="receiveUserName">
          <el-input v-model="ruleForm.receiveUserName" clearable @blur="sessionStorage"></el-input>
        </el-form-item>
        <el-form-item label="使用地点" prop="useAddress">
          <el-input v-model="ruleForm.useAddress" clearable @blur="sessionStorage"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input   type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" clearable v-model="ruleForm.remark" @blur="sessionStorage"></el-input>
        </el-form-item>
        <el-form-item>
        <div class="btn-box">
          <el-button @click="resetForm('ruleForm')">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </div>
        </el-form-item>
      </el-form>
    </div>
    <!--详情-->
    <el-dialog :modal-append-to-body="false" :close-on-click-modal="false" @close="closeDetailFun" title="详情" :visible.sync="showDetail" width="90%" class="detail-box">
      <mobileDetail :detailData="detailData"></mobileDetail>
    </el-dialog>
    <!--材料-->
    <div class="materail-box ">
      <el-dialog :modal-append-to-body="false" :close-on-click-modal="false" @close="closeDetailFun" title="材料" :visible.sync="showMaterial" width="90%"  class="detail-box">
        <materailBasicList :materailBasicInfoList="materailBasicInfoList" @getMaterialName="getMaterialName"></materailBasicList>
      </el-dialog>
    </div>
  </div>



  </div>
</template>

<script>
import axios from 'axios'
import {
  pageDrawApply,
  deleteDrawApply,
  getwlId,
  exportDraw,
  drawApplyTotalAmount,
  submitDrawApply
} from '@/api/materialScience/materialRequisition.js'
import { getWarehouseList } from '@/api/materialScience/warehousingApplication.js'
import { allMaterApprovalList } from '@/api/essentialInformation.js'
import { listAllDict } from '@/api/materialScience/materailDict.js'
import * as dd from 'dingtalk-jsapi'
import submitForm from './components/submitForm.vue'
import historyLook from '@/components/historyLook'
import mobileDetail from './components/mobileDetail'
import materailBasicList from './components/materailBasicList.vue'
import { getHistoryLook, postWithdraw, allEngTypeList } from '@/api/user'
import { mapState } from 'vuex'
import { applyImport, downloadTemplateByType } from '@/api/importApply.js'
import { findByCanCheckMaterail } from '@/api/inventoryManagement'
let $this = null
export default {
  name: 'materialRequisition',
  components: {
    submitForm,
    historyLook,
    mobileDetail,
    materailBasicList
  },
  computed: {
    ...mapState(['authList'])
  },
  data () {
    return {
      isMobile: false,
      noMore: false,
      showForm: true,
      showDetail: false,
      subLoading: false,
      showMaterial: false,
      detailData: {},
      count: 0,
      contentView: true,
      placeholder: '材料名称',
      loading: false,
      queryInfo: {
        pageNo: 1,
        pageSize: 25,
        receiveUnit: '',
        projectName: '',
        materialNumber: '',
        unitEngName: ''
      },
      tableData: [],
      total: 0,
      subData: {
        btnId: 0,
        id: ''
      },
      visible: false,
      historyTables: [],
      importVisible: false,
      importForm: {
        importType: 4,
        fileName: ''
      },
      fileList: [],
      importUrl: this.importUrl,
      headers: {
        apiKey: window.sessionStorage.getItem('token')
      },
      professCateType: [], // 专业类别
      projectNames: [], // 项目名称
      projectLoading: false,
      receivingUnits: [], // 领用单位
      engTypes: [],
      sum: 0,
      isExport: false,
      warehouseList: [], // 仓库
      materailBasicInfoList: [], // 材料
      ruleForm: {
        materialName: '',
        materailDTO: {
          singlePrice: '',
          materialNumber: '',
          materailBasicInfoId: ''
        },
        receiveUnit: ''
      },
      rules: {
        engType: [{ required: true, message: '请选择工程类型', trigger: 'change' }],
        'materailDTO.actualQut': [{ required: true, message: '请输入领用数量', trigger: 'blur' }],
        'materailDTO.materailBasicInfoId': [{ required: true, message: '请选择领用材料', trigger: 'blur' }],
        'materailDTO.notLimitStock': [{ required: true, message: '请输入非限制性库存', trigger: 'blur' }],
        professCate: [{ required: true, message: '请选择专业类别', trigger: 'change' }],
        projectName: [{ required: true, message: '请输入项目名称', trigger: 'change' }],
        receiveBatch: [{ required: true, message: '请输入领用批次', trigger: 'blur' }],
        receiveDepart: [{ required: true, message: '请输入领用部门', trigger: 'blur' }],
        receiveTime: [{ required: true, message: '请选择领用时间', trigger: 'change' }],
        receiveUnit: [{ required: true, message: '请输入领用单位', trigger: 'change' }],
        receiveUserName: [{ required: true, message: '请输入领用人', trigger: 'blur' }],
        repositoryId: [{ required: true, message: '请选择仓库', trigger: 'change' }],
        unitEngName: [{ required: true, message: '请输入领用工程名称', trigger: 'blur' }],
        useAddress: [{ required: true, message: '请输入使用地点', trigger: 'blur' }]
      }

    }
  },
  created () {
    $this = this
    if (this.$utils.isMobile()) {
      this.isMobile = true
      this.addFormData()
      this.professCateTypeFun()
      this.receivingUnitFun()
      this.projectNamesFun()
    }
    allEngTypeList().then((res) => {
      this.engTypes = res.data.data
      // $this.getPageDrawApply();
    })
    let materialRequisitionData  = window.sessionStorage.getItem('materialRequisitionData')
    if(materialRequisitionData){
      this.ruleForm = JSON.parse(materialRequisitionData)
    }
  },
  methods: {
    exportData () {
      $this.isExport = true
      exportDraw($this.queryInfo)
        .then((res) => {
          $this.isExport = false
          $this.downloadFile(res, '领用物资表')
        })
        .catch((err) => {
          $this.isExport = false
          return $this.$message.error('导出文件错误')
        })
    },
    downloadTemplate () {
      $this.isDown = true
      const ttt = {
        type: 4
      }
      downloadTemplateByType(ttt)
        .then((res) => {
          $this.isDown = false
          $this.downloadFile(res, '领用物资导入模板')
        })
        .catch((err) => {
          $this.isDown = false
          return $this.$message.error('导出文件错误')
        })
    },
    // 查看数据
    lookeDetails () {
      $this.showForm = false
      $this.getPageDrawApply()
    },
    addImoprt () {
      this.importVisible = true
    },
    submitImport () {
      if (!$this.importForm.fileName) {
        $this.$message({
          type: 'error',
          message: '文件不能为空',
          showClose: true
        })
        return
      }
      $this.isDown = true

      applyImport($this.importForm).then((res) => {
        if (
          res.headers['content-type'] &&
          res.headers['content-type'].indexOf('multipart/form-data') >= 0
        ) {
          $this.isDown = false
          $this.downloadFile(res, '错误信息')
          this.importVisible = false
          return
        }

        $this.isDown = false
        // console.log(res)
        if (
          res.headers['content-type'] &&
          res.headers['content-type'].indexOf('application/json') >= 0
        ) {
          $this.$message({
            type: 'error',
            message: '导入失败,请检查审批配置',
            showClose: true
          })
          return
        }
        $this.$message({
          type: 'success',
          message: '提交成功',
          showClose: true
        })
        this.importVisible = false
        $this.$emit('refresh')
      })
    },
    // 导入成功触发
    beforeUpload (file) {
      this.$loading({
        lock: true,
        text: '正在上传...',
        spinner: 'el-icon-loading'
      })
    },
    // 导入成功触发
    uploadSuccessHandler (response, file, fileList) {
      this.$loading().close()
      if (response.success) {
        $this.$message({
          type: 'success',
          message: '上传成功,请提交审批',
          showClose: true
        })
        $this.importForm.fileName = response.data.fileName
        $this.importForm.originFileName = response.data.originFileName
        $this.fileList = []
        $this.fileList.push({ name: response.data.originFileName, url: '' })
        // this.getPageProcurement()
      } else {
        $this.$message({
          type: 'error',
          message: response.message,
          showClose: true
        })
        $this.fileList = []
      }
    },
    uploadFailHandler () {
      this.$loading().close()
      $this.$message.error('上传失败')
    },

    expend (row, label) {
      if (label.length > 0) {
        getwlId(row.id)
          .then((res) => {
            row.children = res.data.data.slice(0)
            if (res.data.code != 200) {
              return $this.$message.error(res.data.message)
            }
          })
          .catch((err) => {})
      }
    },
    authFilter (code) {
      let flag = false
      if (this.authList.length) {
        this.authList.forEach((item) => {
          if (item.resourceCode == code) {
            flag = true
          }
        })
      }
      return flag
    },
    // 撤回
    withdraw (row) {
      this.$loading()
      postWithdraw({ documentId: row.id }).then((res) => {
        this.$loading().close()
        const { data } = res
        if (data.code == '200') {
          this.getPageDrawApply()
          this.$message.success(data.message)
        } else {
          this.$message.error(data.message)
        }
      })
    },
    // 审批历史
    history (row) {
      getHistoryLook(row.processInstanceId).then((res) => {
        this.historyTables = res.data.data
        this.visible = true
      })
    },
    getPageDrawApply () {
      $this.loading = true
      pageDrawApply($this.queryInfo)
        .then((res) => {
          $this.loading = false
          if (res.data.code != 200) {
            return $this.$message.error(res.data.message)
          }
          res.data.data.records.map((item) => {
            item.children = []
          })
          const tableData = res.data.data.records
          const total = res.data.data.total
          $this.tableData = tableData
          $this.total = total
        })
        .catch((err) => {
          $this.loading = false
          return $this.$message.error(err.message)
        })

      drawApplyTotalAmount($this.queryInfo).then((res) => {
        $this.sum = res.data.data
      })
    },
    handleCurrentChange (val) {
      $this.queryInfo.pageNo = val
      $this.getPageDrawApply()
    },
    handleSizeChange (size) {
      $this.queryInfo.pageSize = size
      $this.getPageDrawApply()
    },
    seacher (key) {
      // this.queryInfo.materailName = key
      $this.getPageDrawApply()
    },
    operationView (btnId, row) {
      if (btnId === 0) {
        $this.subData.btnId = btnId
        $this.contentView = false
      } else if (btnId === 1) {
        $this.subData.btnId = btnId
        $this.subData.id = row.id
        $this.contentView = false
      } else if (btnId === 2) {
        $this
          .$confirm('此操作将删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            return $this.deleteDrawApply(row)
          })
          .catch(() => {
            return $this.$message.info('已取消删除')
          })
      } else {
        return $this.$message.error('操作错误')
      }
    },
    // 删除
    deleteDrawApply (row) {
      $this.$set(row, 'loading', true)
      deleteDrawApply(row.id)
        .then((res) => {
          $this.$set(row, 'loading', false)
          if (res.data.code != 200) {
            return $this.$message.error(res.data.message)
          }
          $this.getPageReturnStock()
          return $this.$message.success('删除成功')
        })
        .catch((err) => {
          $this.$set(row, 'loading', false)
          return $this.$message.error('操作错误')
        })
    },
    // 返回table
    closeView () {
      $this.contentView = true
    },
    refreshTable () {
      $this.contentView = true
      $this.getPageDrawApply()
    },
    downloadFile (res, name) {
      const blob = new Blob([res.data])
      const fileName = name + '.xlsx'
      const elink = document.createElement('a')
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href)
      document.body.removeChild(elink)
    },
    // 显示表单
    addFormData () {
      this.showForm = true
      getWarehouseList().then(res => {
        $this.warehouseList = res.data.data
        // console.log(res.data)
      })
    },
    // 缓存草稿
    sessionStorage(){
      window.sessionStorage.setItem("materialRequisitionData", JSON.stringify(this.ruleForm));
    },
    // 检索材料np
    getMaterialName (item) {
      this.ruleForm.materialName = item.materialName
      this.ruleForm.materialNumber = item.materialNumber
      this.ruleForm.receiveDepart = item.unit
      this.ruleForm.materailDTO.materailBasicInfoId = item.materialBasicId
      this.$refs.ruleForm.validateField('materailDTO.materailBasicInfoId')
      this.sessionStorage()
      this.showMaterial = false
    },
    // 检索专业类别
    professCateTypeFun (valueOne) {
      // if (valueOne) {
        const postData = {
          type: 1,
          valueOne
        }
        listAllDict(postData).then(res => {
          $this.professCateType = res.data.data
        }).catch(err => {})
      // }
    },
    // 检索领用单位
    receivingUnitFun (valueOne) {
      // if (valueOne) {
        const postData = {
          type: 2,
          valueOne
        }
        listAllDict(postData).then(res => {
          $this.receivingUnits = res.data.data
        }).catch()
      // }
    },
    // 检索项目信息
    projectNamesFun (valueOne) {
      // if (valueOne) {
        const postData = {
          type: 3,
          valueOne
        }
        listAllDict(postData).then(res => {
          $this.projectNames = res.data.data
        }).catch()
      // }
    },
    // 扫码
    scanQr () {
      dd.ready(function () {
        dd.biz.util.scan({
          type: 'qrCode',
          onSuccess: function (data) {
            const qrInfo = data.text.split(',')
            if( isNaN(parseFloat( qrInfo[1]))){
              alert(JSON.stringify(qrInfo[1]))
              confirm("二维码信息有误,物料编码格式错误")
              return
            }
            findByCanCheckMaterail({ materailNumber: qrInfo[1] }).then(res => {
              if (res.data.code !== 200) {
                this.errorNotify('操作错误')
                return
              }
              if (!res.data.data.length) {
                this.errorNotify('无该材料信息')
                return
              }
              const data = res.data.data[0]
              $this.ruleForm.materialName = data.materialName
              $this.ruleForm.materailDTO.materailBasicInfoId = data.materialBasicId
              $this.ruleForm.materialNumber = qrInfo[1]
            // if( isNaN(parseFloat($this.ruleForm.materialNumber))){
            //   alert(JSON.stringify(isNaN(parseFloat($this.ruleForm.materialNumber))))
            //   confirm("二维码信有误,物料编码错误")
            //   return false;
            // }
              $this.ruleForm.receiveDepart = qrInfo[2]
              $this.sessionStorage()
              // $this.ruleForm.materailDTO.singlePrice = qrInfo[3] //单价
              $this.$refs.ruleForm.validateField('materailDTO.materailBasicInfoId')
            })
          },
          onFail: function (err) {}
        })
      })
    },
    //错误提示
    errorNotify(message) {
      this.$notify.error({
        message:this.$createElement('div', { style: 'color: #F56C6C'}, message),
        duration:0
      });
    },
    //成功提示
    successNotify(message) {
      this.$notify.success({
        message:this.$createElement('div', { style: 'color: #67C23A'}, message),
        duration:0
      });
    },
    // 手机端 新增
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          this.errorNotify('请完善表单信息')
          return
        }
        $this.subLoading = true
        $this.ruleForm.receiveTime = $this.$utils.formatTime($this.ruleForm.receiveTime,'Y-M-D')
        submitDrawApply($this.ruleForm).then(res => {
          $this.subLoading = false
          if (res.data.code != 200) {
            this.errorNotify(res.data.message)
            return
          }
          sessionStorage.removeItem("materialRequisitionData")
          this.successNotify('已提交')
        }).catch(err => {
          $this.subLoading = false
          this.errorNotify('操作错误')
        })
      })
    },
    resetForm (formName) {
      this.showForm = false
    },
    // 显示详情
    showDetailFun (item) {
      $this.showDetail = true
      $this.detailData = item
    },
    // 关闭详情弹窗
    closeDetailFun () {
      $this.detailData = {}
      $this.showDetail = false
      $this.showMaterial = false
      $this.visible = false
      $this.materailBasicInfoList = []
    }
  }
}
</script>
<style lang="scss" scoped>

@mixin box-width {
  width: 90%;
  margin: 10px auto;
}
.mobile-box {
  position: relative;

  .el-row{
    display: flex;
    flex-direction: column;
  }
  .btn-data {
    @include box-width;
  }
  .mobile-seacher-box{
   width: 90%;
    margin: 10px auto;
  }
  ul {
    padding: 0;
    & > li {
      @include box-width;
      list-style-type: none;
      .btn-box {
        text-align: right;
        margin-bottom: 10px;
      }
      .el-col {
        margin: 5px 0;
      }
    }
  }
  .no-data {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    img {
      width: 400px;
    }
  }
  .addForm {
    .el-input,
    .el-select,
    .el-textarea{
      width: 100%;
    }
    .el-form-item{
      padding: 0 20px;
      margin-bottom: 10px;
      .btn-box{
        width: 100%;
        text-align: center;
        margin: 20px 0;
        .el-button{
          width: 45%;
        }
      }
    }
  }
  .detail-box,.materail-box{
    overflow: auto;
    div{
      margin: 5px 0;
      font-size: 15px;
    }
  }

}
</style>
<style lang="scss">
.el-table th {
  padding: 0;
  line-height: normal;
}

.materail-box{
.el-dialog{
  height: 90vh;
  .el-dialog__body{
    padding:  20px;
  }
}

}
  .addForm{
    .el-input.is-disabled{
      .el-input__inner{
        color: #000;
        /*background: #fff;*/
      }
    }

  }

</style>
